<template>
  <div class="live">
    <div class="up">
      <p>今日热卖</p>
      <p>一起买，更便宜</p>
      <p>进入频道 ></p>
    </div>
    <div class="down">
      <div class="produce" v-for="(hot) in hotSell" :key="hot.id" @click="toDetail(hot.id)">
        <img :src="hot.list_pic_url" alt="">
        <div>
          <span>首发价</span>
          <span>{{hot.retail_price}}</span>
          <span>元起</span>
          <span>{{hot.name.slice(4,12)}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'TodayGroupShop',
  computed:{
    ...mapGetters('home',['hotGoodsList']),
    hotSell(){
      return this.hotGoodsList.slice(1,3)
    }
  },
  mounted() {
    this.$store.dispatch('home/getBannerList')
  },
  methods:{
    toDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id:id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.live{
  width: 100%;
  // height: 500px;
  // background-color: wheat;
  .up{
    width: 100%;
    // height: 100px;
    // background-color: yellowgreen;
    display: flex;
    padding: 0 15px;
    box-sizing: border-box;
    margin-top: 50px;
    :nth-child(1){
      font-size: 50px;
      font-weight: 500;
      margin: 0;
      width: 22%;
    }
    :nth-child(2){
      font-size: 22px;
      color: gray;
      width: 60%;
    }
    :nth-child(3){
      font-size: 22px;
    }
  }
  .down{
    width: 100%;
    // height: 280px;
    // background-color: hotpink;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    > :nth-child(1){
      margin-right: 24px;
    }
    .produce{
      width: 48.5%;
      img{
        width: 100%;
        border-radius: 20px;
      }
      div{
        margin-top:10px;
        :nth-child(1){
          font-weight: bolder;
          color: #9f8052;
        }
        :nth-child(2){
          font-size:36px;
          color: #9f8052
        }
        :nth-child(3){
          color: #9f8052
        }
        :nth-child(4){
          float: right;
          color: gray;
        }
      }

    }
  }
}
</style>
